/* 头部  */
.navbar{
  width: 100%;
  background-color: #222222;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 999;
  margin-bottom: 0px !important;
  .container{
    .navbar-header{
      .image{
        margin-top: -8px;
      }
    }
    
    .navbar-collapse{
      .navbar-nav>li>.dropdown-menu{
      min-width: 121px!important;
    }
  }
  // bootstrap 样式 在1024px时  导航栏变形
    @media screen and (max-width: 1200px) {
      .navbar-header {
          float: none;
      }
      .navbar-left,.navbar-right {
          float: none !important;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .collapse.in{
          display:block !important;
      }
      .language{
        display: none;
      }
    }
  } 
}

/* 底部 */
.foot{
  width: 100%;
  padding: 2% 0;
  background-color: #3b3b3b;
  .container{
    .box{ 
      display: flex;
      justify-content: space-between;
    .mork{
      order: 0;
        .one{
          color: #9d9d9d;
          ul{
            display: flex;
            flex-direction: row;
            li{
              margin-right: 5px;
              a{
                color: #9d9d9d;
                font-size: 1em;
              }
            }
          }
        }

    }
    .cate{
      order: 0;
      display: flex;
      align-items: center;
      .email,
      .vx,
      .qq{
        width: 3em;
        height: 3em;
        margin-right: 10px;
        position: relative;
        &:hover{
          cursor: pointer;
        }
        &:hover .erweima{
          display: block;
        }
        .erweima{
          display: none;
          width: 142px;
          height: 150px;
          position: absolute;
          top: -340%;
          left: -50px;
          img{
            width: 142px;
            height: 150px;
          }
        }    
        span{
          width: 2em;
          height: 2em;
          img{
            width: 2em;
            height: 2em;
          }
        }
      }
      }
    }
    
  }
  @media screen and(max-width:810px ) {
    .container{
      .box{
        flex-direction: column;
        align-items: center;
        .mork{
          order: 1;
          .one{  
             font-size: .6em;
          }
        }
      }
    }
  }
  @media screen and(max-width:500px ) {
    .container{
      .box{
        .mork{
          .one{  
             font-size: .4em;
          }
        }
      }
    }
  }
} 




